<template>
  <!-- <div>
     
       <div class="center1">  
        <img class="logo_custom1"
        src="../assets/logo.png" alt="">
      <span class="logo_right1">领取50元电影票</span>
    </div>

  </div> -->
  <div id="app" class="page-movie">
    <div class="movie-page">
      <div class="movie-info" style="background-color: #402629">
        <div class="movie-info-top">
          <div
            class="movie-cover"
            data-bid="b_aN5Ak"
            data-view-bid="b_wet6w"
            data-lab='{"movie_id":1446115,"type":0}'
            data-view-sended="1"
          >
            <a href="/asgard/movie/1446115/preview"
              ><img
                class="img noneBg poster"
                
                :src="`${data.movie.img}`"
                width="100"
                height="138"
                e="1"
                c="1" /><img
                class="img noneBg poster-play"
                alt=""
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png"
            /></a>
          </div>
          <div class="movie-desc">
            <div class="movie-desc-top">
              <div class="movie-cn-name" style="width: 211px">
                <h1 style="display: inline-block; width: 206px">
                  {{data.movie.nm}}
                </h1>
              </div>
              <div class="movie-en-name">{{data.movie.enm}}</div>
              <div class="movie-other-info">
                <div class="movie-type">
                  <span class="movie-cat">{{data.movie.cat | getName(data.movie.cat)}}</span
                  ><span class="movie-tag"
                    ><img
                      class="img noneBg"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png"
                  /></span>
                </div>
                <div class="actors">
                  {{data.movie.star | getName(data.movie.star)}}
                  <!-- <a href="/asgard/celebrity/28625">吴京&nbsp;/&nbsp;</a
                  ><a href="/asgard/celebrity/385315">易烊千玺&nbsp;/&nbsp;</a
                  ><a href="/asgard/celebrity/2739">朱亚文</a> -->
                </div>
                <div class="movie-show-time">
                  <span>{{data.movie.pubDesc}} / {{data.movie.dur}}分钟</span>
                </div>
              </div>
            </div>
            <div class="btns">
              <button
                data-bid="b_rjonirtp"
                data-view-bid="b_movie_b_rjonirtp_mv"
                data-lab='{"movie_id":1446115}'
                type="button"
                class="button want-to-watch"
                data-view-sended="1"
              >
                <img
                  class="img noneBg"
                  alt="想看"
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
                /><span>想看</span>
              </button>
            </div>
          </div>
        </div>
        <div class="real-time-word-of-mouth">
          <div class="top">
            <div class="left">
              <img
                class="img noneBg"
                alt="logo"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png"
              /><span>{{data.movie.scoreLabel}}</span>
            </div>
            <div class="right">
              <div
                class="num"
                data-view-bid="b_movie_4r9fhgxi_mv"
                data-view-lab='{"movie_id":1446115,"type":"wantsee"}'
                data-view-sended="1"
              >
                <span>{{data.movie.wish}}</span>
                <span class="">人想看</span>
              </div>
              <div
                class="num watched"
                data-view-bid="b_movie_4r9fhgxi_mv"
                data-view-lab='{"movie_id":1446115,"type":"wantsee"}'
                data-view-sended="1"
              >
                <span>{{data.movie.watched}}</span>
                <span class="">人看过</span>
              </div>
              <a
                href="https://piaofang.maoyan.com/movie/1446115/audienceRating"
                class="link size-clear"
                data-event="https:__piaofang.maoyan.com_movie_1446115_audienceRating"
                ><img
                  class="img noneBg"
                  alt="向右箭头"
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-white.png"
                  width="0.1rem"
                  height="0.18rem"
                  style="margin-left: 0.08rem; margin-right: 0"
              /></a>
            </div>
          </div>
          <div class="middle">
            <div class="left-section">
              <div class="left1">
                <span
                  class="score"
                  data-bid="b_lj5rqufg"
                  data-lab='{"movie_id":1446115}'
                  data-view-bid="b_movie_4r9fhgxi_mv"
                  data-view-lab='{"movie_id":1446115,"type":"score"}'
                  data-view-sended="1"
                  >{{data.movie.sc}}</span
                >
                <div style="visibility: hidden; height: 0; width: 0">
                  {{data.movie.snum}} 人评
                </div>
                <div
                  class="people-grade"
                  data-view-bid="b_movie_4r9fhgxi_mv"
                  data-view-lab='{"movie_id":1446115,"type":"wantsee"}'
                  data-view-sended="1"
                >
                  <span> {{data.movie.snum}}</span>&nbsp; <span class="">人评</span>
                </div>
              </div>
              <div class="right1">
                <a
                  href="https://piaofang.maoyan.com/movie/1446115/audienceRating"
                  class="link"
                  data-event="https:__piaofang.maoyan.com_movie_1446115_audienceRating"
                  ><div class="stars-percent-bar">
                    <div class="stars">
                      <img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      />
                    </div>
                    <div class="bar">
                      <div class="percent" style="width: 92.8%"></div>
                    </div>
                  </div>
                  <div class="stars-percent-bar">
                    <div class="stars">
                      <img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      />
                    </div>
                    <div class="bar">
                      <div class="percent" style="width: 4.1%"></div>
                    </div>
                  </div>
                  <div class="stars-percent-bar">
                    <div class="stars">
                      <img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      />
                    </div>
                    <div class="bar">
                      <div class="percent" style="width: 1.2%"></div>
                    </div>
                  </div>
                  <div class="stars-percent-bar">
                    <div class="stars">
                      <img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      />
                    </div>
                    <div class="bar">
                      <div class="percent" style="width: 0.6%"></div>
                    </div>
                  </div>
                  <div class="stars-percent-bar">
                    <div class="stars">
                      <img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                      /><img
                        class="img noneBg"
                        alt="star"
                        src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                      />
                    </div>
                    <div class="bar">
                      <div class="percent" style="width: 1.3%"></div>
                    </div></div
                ></a>
              </div>
            </div>
            <div
              class="right-reputation"
              data-view-bid="b_movie_z9pck9p2_mv"
              data-view-lab='{"movie_id":1446115,"custom":{"rank":1,"content_name":"中国大陆票房榜"}}'
              data-view-sended="1"
            >
              <div class="reputation-box">
                <img
                  class="img noneBg"
                  alt="reputation"
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/top1-reputation.png"
                />
                <div class="rank">
                  <span class="top1">TOP</span><span class="rank-num"> {{data.reputation.movieRank}}</span>
                </div>
                <div class="desc">
                  <span class="first-word">{{data.reputation.firstWord}}</span
                  ><span class="second-word">{{data.reputation.secondWord}}</span>
                </div>

              </div>
            </div>
          </div>
          <div class="awardBottom"></div>
        </div>
        <div class="brief-introduction">
          <div class="title">
            <span>简介</span>
            <div>
              <button
                type="button"
                class="open"
                data-bid="b_y93QJ"
                data-lab='{"movie_id":1446115,"type":"open"}'
              >
                <span>展开</span
                ><img
                  class="img noneBg"
                  alt="向下箭头"
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
                />
              </button>
            </div>
          </div>
          <div
            data-bid="b_y93QJ"
            data-lab='{"movie_id":1446115,"type":false}'
            class="content"
          >
            <p id="brief-introduction-content" class="normal-line line-clamp">
             {{data.movie.dra}}
            </p>
          </div>
        </div>
        <div
          class="actors"
          data-view-bid="b_movie_byn3kcrc_mv"
          data-lab='{"movie_id":1446115}'
          data-view-sended="1"
        >
          <div class="title">
            <span>演职人员</span
            ><a
              data-bid="b_movie_l81ojcc4_mc"
              data-lab='{"movie_id":1446115}'
              class="go-to-all-actors"
              href="/asgard/movie/1446115/credits"
              ><span>全部</span
              ><img
                class="img noneBg"
                alt="arrow-right"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
            /></a>
          </div>
          <!-- 演员 组件 -->
          <div class="actor-list">
            <ul >
              <li v-for="cel in cele" :key="cel.id">
              <img
                    class="img"
                    :src="cel.avatar | getPoster(cel.avatar)"
                  alt=""
                  /><span class="name">{{cel.cnm}}</span
                  ><span class="role">{{cel.desc}}</span>
              </li>
            
            </ul>
          </div>
        </div>
        <div
          class="videos"
          data-view-bid="b_movie_tqxr0ehc_mv"
          data-lab='{"movie_id":1446115}'
          data-view-sended="1"
        >
          <div class="title">
            <span>视频推荐</span
            ><a
              data-bid="b_movie_vdvyt5qm_mc"
              data-lab='{"movie_id":1446115}'
              class="go-to-all"
              href="/asgard/movie/1446115/preview"
              ><span>全部</span
              ><img
                class="img noneBg"
                alt="arrow-right"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
            /></a>
          </div>
          <div class="videos-list">
            <ul>
              <li
              
              v-for="feed in data.feedVideos.feeds"
              :key="feed.id"
                class="video"
                data-bid="b_movie_opc39tdi_mc"
                data-lab='{"movie_id":1446115}'
              >
                <a
                  data-bid=""
                  href="/asgard/movie/1446115/preview?videoId=484159&amp;feedType=3"
                  >
                  <!--:src="`${feed.video.url}`"  视频地址-->
                  <img
                    class="img bacImg"
                    alt="avatar"
                    :src="`${feed.video.imgUrl}`"
                    width="140"
                    height="93"
                    e="1"
                    c="1" />
                  <div class="play"><div class="triangle"></div></div
                ></a>
              </li>
            </ul>
          </div>
        </div>
        <div
          class="photos"
          data-view-bid="b_movie_4ehnkfdt_mv"
          data-lab='{"movie_id":1446115}'
          data-view-sended="1"
        >
          <div class="title">
            <span>剧照</span
            ><a
              data-bid="b_movie_s9tyz8zg_mc"
              data-lab='{"movie_id":1446115}'
              class="go-to-all"
              href="/asgard/movie/1446115/photos?nm=%E9%95%BF%E6%B4%A5%E6%B9%96%E4%B9%8B%E6%B0%B4%E9%97%A8%E6%A1%A5"
              ><span>全部{{data.movie.pn}}张</span
              ><img
                class="img noneBg"
                alt="arrow-right"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
            /></a>
          </div>
          <!-- 剧照 -->
          <div class="photos-list">
            <ul>
              <li class="left-margin"
              v-for="(a,index) in data.movie.photos"
              :key="index"
              >
                <a
                  data-bid="b_isl6c93g"
                  data-lab='{"movie_id":1446115,"pic_id":"","custom":{"celebrity_id":"","image_url":"https://p0.pipi.cn/friday/7cf8708a40511016271ea03629497f7c.jpg?imageMogr2/thumbnail/2500x2500%3E","approve_number":""}}'
                  href="/asgard/movie/1446115/stages?idx=0"
                  ><img
                    class="img"
                    alt="avatar"
                    :src="`${a}`"
                    width="140"
                    height="93"
                    e="1"
                    c="1"
                /></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <section class="box-office">
        <a
          data-bid="b_iawb2fuh"
          href="https://piaofang.maoyan.com/movie/1446115/boxshow"
          ><header>
            <span class="title">票房</span>
            <div class="goto-detail">
              <span>票房详情</span
              ><img
                class="img noneBg"
                alt="arrow-right"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-black.png"
                width="5"
                height="8"
              />
            </div>
          </header>
          <div class="data-box">
            <div class="item1">
              <div class="value">{{data.mbox.mbox.lastDayRank}}</div>
              <div class="name">昨日排名</div>
            </div>
            <div class="item1">
              <div class="value">{{data.mbox.mbox.firstWeekBox}}</div>
              <div class="name">首周票房(万)</div>
            </div>
            <div class="item1">
              <div class="value">{{data.mbox.mbox.sumBox}}</div>
              <div class="name">累计票房(万)</div>
            </div>
          </div></a
        >
      </section>
      <section
        class="related-informations"
      >
        <header class="one-px-border-bottom">
          <span class="title">相关快讯</span
          ><a
            href="https://i.maoyan.com/asgard/news"
            class="link goto-all"
            data-event="donwload3"
            data-bid="b_53up23as"
            data-view-bid="b_movie_b_53up23as_mv"
            data-lab='{"utm_source":"","utm_content":"","position":"all_article"}'
            data-view-sended="1"
            ><span>全部</span
            ><img
              class="img noneBg"
              alt="arrow-right"
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-black.png"
              width="6"
              height="11"
          /></a>
        </header>
        <!-- 相关快讯 -->
        <div class="informations">
          <article
            data-bid="b_YIImV"
            data-view-bid="b_movie_b_YIImV_mv"
            data-lab='{"movie_id":1446115,"news_id":9694415,"index":"other"}'
            class="information one-px-border-bottom mb"
            data-view-sended="1"
          >
            <a data-bid="" href="/asgard/news/9694415"
              ><div class="top">
                <img
                  class="img noneBg"
                  alt=""
                  data-lab='{"movie_id":1446115,"news_id":9694415,"index":"img"}'
                  src="//p0.meituan.net/moviemachine/3bd4c2ddbf410ed7bf5bec6f0577d5ec186238.png@220w_156h_80q_1e_1c"
                  width="110"
                  height="78"
                  e="1"
                  c="1"
                /><span
                  class="title"
                  data-lab='{"movie_id":1446115,"news_id":9694415,"index":"title"}'
                  >电影《长津湖之水门桥》2022年内地票房冠军，连续24天日冠</span
                >
              </div>
              <div class="bottom">
                <div>
                  <span class="author">猫眼电影</span
                  ><time class="time" title="1646985413000">03-11</time>
                </div>
                <div
                  class="right"
                  data-lab='{"movie_id":1446115,"news_id":9694415,"index":0}'
                >
                  <img
                    class="img noneBg read-icon"
                    alt=""
                    data-bid="b_movie_1ro1h38r_mc"
                    src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/read-num.png"
                    height="12"
                  /><span data-bid="b_movie_1ro1h38r_mc" class="read-num"
                    >4469</span
                  ><img
                    class="img noneBg comment-icon"
                    alt=""
                    data-bid="b_movie_rzzihcam_mc"
                    src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/replying-comments.png"
                    width="12"
                    height="10"
                  /><span data-bid="b_movie_rzzihcam_mc" class="comment-num"
                    >2</span
                  >
                </div>
              </div></a
            >
          </article>
       
        </div>
      </section>
      <div class="disclaimer">
        <p class="content">
          <span>影视行业信息</span
          ><a
            href="https://i.maoyan.com/terms/private?id=privacy_1629962927685"
            class="link"
            data-event="http:__m.maoyan.com_terms_private?id=privacy_1629962927685"
            >《免责声明》</a
          ><span>I 违法和不良信息举报电话：400601890</span>
        </p>
        <section class="bottom-logo noneBottom">
          <img
            class="img noneBg"
            alt=""
            src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/bottom-logo.png"
          />
        </section>
      </div>
    </div>
  </div>
</template>

<script>
// console.log(this.$route.params.id);
export default {
  data: function () {
    return {
      cele:[],
      data: [],
      id: null,
    };
  },
  // 过滤掉图片wh
  filters:{
    getPoster(e){
    var str = e.replace('w.h','')
    return str

    },

getName(e){
    var str = e.replaceAll(',','/')
    return str

    },
  },
  // methods:{
  //   getId() {

  //     this.id = this.$route.query.id;

  //   }
  // },
  created: function () {
    var id = this.$route.params.id;
    // console.log(id);
    this.axios
      .get(" https://apis.netstart.cn/maoyan/movie/detail?movieId= " + id + " ")
      .then((res) => {
        console.log( this.cele,this.data,3333);
        this.cele = res.data.celebrities;
        this.data = res.data;
        // console.log(this.data.movie.photos,1111);

      });
  },
};
</script>

<style lang="less">
.movie-page{
  background: #f4f4f4;
}
 ul::-webkit-scrollbar {
            display: none;
        }
.center1 {
  position: relative;
  height: 60px;
  width: 100%;
  background-color: #fff;
  // z-index: 11;
  display: flex;

  align-items: center;
  box-sizing: border-box;
  left: 0;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  position: fixed;
  top: 0;
  z-index: 120;

  .logo_custom1 {
    position: absolute;
    left: 1.2rem;
    top: 0.4rem;
    width: 6.88rem;
    height: 2.78rem;
  }
  .logo_right1 {
    display: inline-block;
    position: absolute;
    height: 0.34rem;
    line-height: 0.34rem;
    right: 2rem;
    font-size: 0.26rem;
    font-family: PingFangSC-Regular, Arial, Helvetica, sans-seri;
    font-weight: 620;
    color: #666;
    text-decoration: none;
  }
}
.movie-info {

    padding: 21px 16px;
    color: #fff;
    position: relative;
    button {
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    line-height: 1.15;
}
    .movie-info-top {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    .movie-cover {
    float: left;
    height:138px;
    width: 100px;
    position: relative;
    flex-shrink: 0;
    .poster {
    height: 138px;
    width: 100%;
    border: 0;
    display: inline-block;
}
  .poster-play {
    height: 30px;
    width: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: none;
    border: 0;
    display: inline-block;
}
}

      .movie-desc {
    flex-grow: 1;
    margin-left: 12px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    overflow: hidden;
    .movie-desc-top {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    flex-grow: 1;
    .movie-cn-name {
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    h1 {
    font-size: 20px;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
}
    .movie-en-name {
    font-size: 12px;
    opacity: .6;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
    .movie-other-info {
    display: flex;
    flex-grow: 1;
    flex-flow: column;
    justify-content: center;
    .movie-type {
    font-size: 12px;
    display: flex;
    align-items: center;
    .movie-cat {
    opacity: .6;
}
.movie-tag {
    border-radius: 2px;
    margin-left: 4px;
    vertical-align: text-bottom;
    display: flex;
    align-items: center;
    .noneBg {
    background: none;
    height: 14px;
}
}
}

    .actors {
    opacity: .6;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}
.movie-show-time span {
    opacity: .6;
    font-size:12px;
}


}


}

  .btns {
    display: flex;
    justify-content: space-between;
    .button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsla(0,0%,100%,.35);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    font-size: 14px;
    width: 47.61904762%;
    height: 30px;
    color: #fff;
    img {
    width: 14px;
    height:14px;
    margin-right: 6px;
    background: none;
    border: 0;
    display: inline-block;
}
}
}


}
    }
.real-time-word-of-mouth {
    background-color: rgba(0,0,0,.18);
    border-radius: 8px;
    margin-top: 15px;
    padding: 9px 10px 10px 0;
    box-sizing: border-box;
   .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: PingFangSC-Regular;
    padding-left: 10px;
    .left {
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
     img {
    width: 15.594px;
    height: 15.594px;
    margin-right: 4px;
    background: none;
    border: 0;
    display: inline-block;
}
}

      .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 10px;
    margin-right: 2px;
    .num {
    opacity: .6;
    font-size: 12px;
}
  .watched {
    margin-left: 0.26rem;
}
.img {
    width: 5px;
    height: 9px;
    margin-left: 4px;
    margin-right: 0;
    background: none;
}
}
}
    .middle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 11px 0 3px;
    .left-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    .left1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 4px;
    .score {
    font-weight: 600;
  
    font-size: 26px;
    color: #ffb400;
    line-height: 26px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4px;
}
    .people-grade {
    font-weight: 400;
    opacity: .6;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    display: flex;
    word-break: keep-all;
    color: hsla(0,0%,100%,.4);
    letter-spacing: 0;
    text-align: center;
    line-height: 10px;
    zoom: .5;
}
}

    .right1{
      .stars-percent-bar {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    .stars {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 35px;
    img {
    height: 5px;
    width: 5px;
    margin-left: 1.3px;
    opacity: .4;
}
}

    .bar {
    width: 71px;
    height: 4px;
    background-color: hsla(0,0%,100%,.06);
    border-radius: 1px;
    margin-left: 4px;
    .percent {
    height: 100%;
  
    background: hsla(0,0%,100%,.3);
    border-radius: 1px;
    transition: width 1.5s;
}
}
}
    }

}

      .right-reputation {
    margin-right: 5px;
    width:120px;
    display: flex;
    justify-content: flex-end;
    align-self: center;
    .reputation-box {
    width: 120px;
    height: 44px;
    box-sizing: border-box;
    background-image: linear-gradient(270deg,rgba(0,0,0,.04),rgba(226,177,117,.11));
    border-radius: 6px;
    padding: 4px;
    position: relative;
    .img {
    width: 29px;
    height: 36px;
    background: none;
}

 .rank {
    position: absolute;
    left: 0;
    top: 9px;
    display: flex;
    flex-direction: column;
    font-family: PingFangSC-Medium;
    width: 29px;
    margin-left: 4px;
    .top1 {
    font-size: 18px;
    line-height: 10px;
    font-weight: 600;
    text-shadow: 0 1px 4px #8e5d25;
    font-family: PingFangSC-Semibold;
    color: rgba(255,229,150,.7);
    letter-spacing: 0;
    transform: scale(.5);
    width: 19px;
    transform-origin: 50%;
}
.rank-num {
    font-size: 15px;
    line-height: 13px;
    font-family: MaoYanHeiTi-H-H;
    color: #ffe186;
    letter-spacing: 0;
    text-align: center;
    margin-top: 3px;
}
}

    .desc {
    position: absolute;
    left: 38px;
    top: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    width: 85px;
    .first-word {
    font-weight: 400;
    font-family: PingFangSC-Regular;
    opacity: .7;
    font-size: 20px;
    color: #ffeec1;
    letter-spacing: 0;
    height: 13px;
    line-height: 13px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    transform-origin: 0;
}
      .second-word {
    font-weight: 500;
    font-family: PingFangSC-Medium;
    color: #fff4bd;
    letter-spacing: 0;
    line-height: 14px;
    height: 14px;
    text-shadow: 0 1px 3px rgb(166 97 48 / 50%);
    font-size: 22px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    transform-origin: 0;
}
}


}


}



}

.awardBottom {
    margin-top: 7px;
    background: rgba(0,0,0,.12);
    border-radius: 6px;
    padding: 0 5px 0 11px;
    margin-left: 10px;
}

}
.brief-introduction>.title>div button {
    font-size: 12px;
    opacity: .6;
    color: #fff;
    width: 45px;
    text-transform: none;
    background-color: transparent;
    img {
      width: 5px;
    height: 8px;
    margin-left: 6px;
    transform: rotate(90deg);
}

}
.brief-introduction {
    position: relative;
    padding: 18px 0 0;
    .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
    font-size: 15px;
}
}
    .content {
    font-size: 15px;
    line-height: 26px;
    overflow: hidden;
    p {
    margin: 7px 0;
    text-align: justify;
}
  .line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}
}
}
.actors {
    margin: 18px 0 15px;
    .title {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .go-to-all-actors {
    opacity: .6;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
    img {
    width: 5px;
    height: 8px;
    margin-left: 6px;
}
}
}

.actor-list {
    margin-top: 11px;
    ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    list-style: none;
    li{
       margin-left: 8px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 82px;
    img {
    width:80px;
    height: 112px;
    display: block;
    background: none;
}
    .name{
      font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
    }
    .role {
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
    opacity: .4;
}
}
    
}
}
}

.videos {
    margin-top: 18px;
    .title {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
     .go-to-all {
    opacity: .6;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
   
    
    img {
    width: 5px;
    height: 8px;
    margin-left: 6px;

}
}
}

.videos-list {
    margin-top: 11px;
    ul{
      display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    list-style: none;
       li {
    flex-shrink: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: inherit;
    .bacImg{
      width: 140px;
    height: 93px;
    border-radius:8px;
    background: rgba(0,0,0,.7);
    }

    .play {
    position: absolute;
    top: 30.5px;
    left: 54px;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    background: hsla(0,0%,100%,.9);
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 30%);
    border-radius: 16px;
    .triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #222;
    border-style: solid;
    border-width: 6px 9px;
    top: 10px;
    left:13px;
}
}
}
}
    }
}
}

.photos {
    margin-top: 18px;
    .title {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .go-to-all {
    opacity: .6;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
    img {
    width: 5px;
    height: 8px;
    margin-left: 6px;
}

}
}

.photos-list {
    margin-top: 11px;
    ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    list-style: none;
     li {
       margin-left: 8px;
    flex-shrink: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    a {
    text-decoration: none;
    color: inherit;
    img {
    width: 140px;
    height: 93px;
}
}
}
}
}
}

// 演员



}

.box-office {
    margin-top: 12px;
    background-color: #fff;
    overflow: hidden;
     a {
    text-decoration: none;
    color: inherit;

}
header {
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    .title {
    font-size: 15px;
    color: #333;
}

.goto-detail {
    font-size: 12px;
    color: #999;
     img {
    width: 5px;
    height: 8px;
    margin-left: 8px;
}
}
}
.data-box {
    background-color: #f8f8f8;
    border-radius: 6px;
    margin: 0 15px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item1 {
    flex-grow: 1;
    text-align: center;
    padding: 12px 0 11px;
     .value {
    font-size: 17px;
    color: #f03d37;
}
.name {
    font-size: 12px;
    color: #666;
    margin-top: 1px;
}
}
}
}

.related-informations {
    margin-top: 12px;
    background-color: #fff;
    overflow: hidden;
    header{
 height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    }
    .one-px-border-bottom {
    position: relative;
    border-bottom: none;
   
    .title {
    font-size: 15px;
    color: #333;
}
    .goto-all {
    font-size: 13px;
    color: #666;
    height: 100%;
    width: 42px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
    width: 6px;
    height: 11px;
    margin-left:4px;
}
}
}

.informations {
    padding: 0 15px;

    .information {
    padding: 15px 0;
     a {
    text-decoration: none;
    color: inherit;
}
.top {
    overflow: hidden;
    img {
    width: 110px;
    height: 78px;
    border-radius: 2px;
    float: right;
}

    .title {
    font-size: 17px;
    color: #333;
    line-height: 24px;
    margin-right: 115px;
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
}

.bottom {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    .author {
    margin-right: 7px;
}

    .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .read-icon {
    margin-right: 4px;
}
    .comment-icon {
    margin: 0 5px 0 40px;
}
}
}
}
}
}
.disclaimer {
    margin-top: 40px;
    text-align: center;
    .content {
    font-size: 11px;
    line-height: 16px;
    color: #999;
}
.bottom-logo {
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    margin-top: -4.5px;
     .img {
    height: 22px;
}
}
}


</style>